@import '../../containers/Application/colors.scss';
@import './variables.scss';

$itemBackgroundColorPrimary: $silver;
$itemBackgroundColorSecondary: $shakespeare;

$itemPrimaryColor: $black;
$itemSecondaryColor: $white;

$borderRadius: 3px;
$dropdownContainerBoxShadow: 2px 6px 12px 0 rgba($silver, .22);

.toolbar {
    height: $toolbarHeight;
    width: calc($columnWidth + $columnBorderWidth);
    display: inline-flex;
    justify-content: space-between;
}

.item {
    flex: 1;
    text-align: center;
    font-size: 16px;
    padding: 5px 0;
    cursor: pointer;
    margin-left: 1px;
    border: 0;

    &:first-child {
        border-top-left-radius: $borderRadius;
        margin-left: 0;
    }

    &:last-child {
        border-top-right-radius: $borderRadius;
    }

    &.primary {
        background: $itemBackgroundColorPrimary;
        color: $itemPrimaryColor;
    }

    &.secondary {
        background: $itemBackgroundColorSecondary;
        color: $itemSecondaryColor;
    }
}
